﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
	<meta content="email=no" name="format-detection" />
	<meta name="screen-orientation" content="portrait">
	<meta name="full-screen" content="yes">
	<meta name="browsermode" content="application">
	<title>百度语音助手</title>
	<link href="https://cdn.bootcss.com/loaders.css/0.1.2/loaders.min.css" rel="stylesheet">
	<link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
	<style>
		body {
			margin: 0;
			padding: 0;
			background: black;
			color: white;
		}

		#app {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 20px;
		}

		.voice-loader {
			text-align: center;
			padding-top: 50px;
		}

		.voice-loader .ball-scale-multiple {
			height: 100px;
			width: 100px;
			margin: 0 auto;
		}

		.voice-loader .ball-scale-multiple div {
			left: 0;
			height: 100px;
			width: 100px;
		}

		.speech-loader {
			display: flex;
			align-items: center;
		}

		.speech-text {
			padding-left: 20px;
		}

		.sending-loader {
			display: flex;
			align-items: center;
		}

		.sending-text {
			padding-left: 50px;
		}


		.hide {
			display: none !important;
		}

		@media screen and (max-width: 500px) {

			.voice-loader span {
				display: none;
			}

			.speech-loader,
			.sending-loader {
				display: block;
			}

			.speech-text,
			.sending-text {
				padding-left: 0;
			}

		}
	</style>
</head>

<body>

	<div id="app">

		<div class="voice-loader">
			<div class="ball-scale-multiple">
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div>
				百度语音助手<span>，点击开始服务</span>
			</div>
		</div>

		<div class="speech-loader hide">
			<div class="loader-inner line-scale-pulse-out-rapid">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="speech-text">
				正在聆听中...
			</div>
		</div>

		<div class="sending-loader hide">
			<div class="pacman">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="sending-text">
				命令发送中...
			</div>
		</div>

	</div>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
	<script>
		toastr.options = {
			"closeButton": true,
			"debug": false,
			"newestOnTop": false,
			"progressBar": true,
			"positionClass": "toast-top-right",
			"preventDuplicates": false,
			"onclick": null,
			"showDuration": "300",
			"hideDuration": "1000",
			"timeOut": "5000",
			"extendedTimeOut": "1000",
			"showEasing": "swing",
			"hideEasing": "linear",
			"showMethod": "fadeIn",
			"hideMethod": "fadeOut"
		}
		function toast(msg) {
			toastr["info"]("百度语音助手", msg)
		}
	</script>
	<script type="text/javascript" src="h5recorder.js?v=1.0.1"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script>
		let sp = document.querySelector('.speech-loader'),
			vo = document.querySelector('.voice-loader'),
			st = document.querySelector('.speech-text'),
			sl = document.querySelector('.sending-loader')
		vo.onclick = () => {
			recognition.start()
		}
		document.addEventListener('DOMContentLoaded', function () {
			FastClick.attach(document.body);
		}, false);	
	</script>
	<script>
		var step = 0
		var timer = null;
		var recorder;
		var recognition = {};
		//开始录音
		recognition.start = function () {
			h5recorder.get(function (rec) {
				recorder = rec;
				recorder.start();
				step = 4
				vo.classList.add('hide')
				sp.classList.remove('hide')
				st.textContent = `正在聆听中...${step}秒`
				timer = setInterval(() => {
					step -= 1
					st.textContent = `正在聆听中...${step}秒`
					if (step <= 0) {
						clearInterval(timer)
						recorder.stop()
						recognition.stop()
					}
				}, 1000)
			});
		};
		//结束识别
		recognition.stop = function () {
			toast("识别结束，发送命令中...")
			sp.classList.add('hide')
			sl.classList.remove('hide')
			// 发送录音文件
			let query = new URLSearchParams(location.search)
			let api = decodeURIComponent(query.get('api'))
			recorder.upload(api).then(obj => {
				if (obj.code == 0) {
					toast(`识别结果【${obj.text}】`)
				}
				setTimeout(() => {
					toast(obj.msg)
				}, 1000)
				sl.classList.add('hide')
				vo.classList.remove('hide')
			})
			/*
			recorder.upload(api, function (state, e) {
                switch (state) {
                    case 'uploading':
                        
                        break;
                    case 'ok':
                        let obj = JSON.parse(e.target.responseText)
						if(obj.code == 0){
							toast(`识别结果【${obj.text}】`)
						}
						setTimeout(()=>{
							toast(obj.msg)
						},1000)
						sl.classList.add('hide')
						vo.classList.remove('hide')
                        break;
                    case 'error':
                        toast("上传失败");
                        break;
                }
			});
			*/
		};
	</script>
</body>

</html>